<template>
  <div class="app-container">
    <el-form id="consult-form" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="require-form" size="small" style="width:60%">
      <el-form-item label="一期推荐金额" prop="title">
        <el-input v-model="ruleForm.rule.spreadBasic" maxlength="30" placeholder="请输入一期推荐金额" class="name" style="width:50%"/>
      </el-form-item>
      <el-form-item label="入职45天金额" prop="developer">
        <el-input v-model="ruleForm.rule.spreadAfterWork" maxlength="30" placeholder="请输入入职45天金额" class="name" style="width:50%"/>
      </el-form-item>
      <el-form-item label="等级金额" prop="total_mianji">
        <el-button size="small" icon="el-icon-search" type="success" @click="handleCreate()">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-table v-loading="listLoading" :data="ruleForm.ruleDetail" border fit highlight-current-row style="width: 100%;">
          <el-table-column label="级别" align="center">
            <template slot-scope="scope">
              级别<el-input v-model="scope.row.spreadLevel" disabled style="display:inline-block;width:50px;margin-left:5px;" class="name"/>
            </template>
          </el-table-column>
          <el-table-column label="等级人数" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.spreadCount" maxlength="30" placeholder="请输人数" class="name"/>
            </template>
          </el-table-column>
          <el-table-column label="等级单人金额" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.spreadMoney" maxlength="30" placeholder="请输入金额" class="name"/>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item class="submit-btn">
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
	fetchInviteRuleAjax,
	updateInviteRuleAjax
} from "@/api/finance";
import waves from "@/directive/waves"; // Waves directive
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
	name: "ComplexTable",
	components: { Pagination },
	directives: { waves },
	filters: {},

	data() {
		return {
			ruleForm: {
				rule: {},
				ruleDetail: []
			},
			list: [],
			rules: {}
		};
	},
	created() {
		this.fetchInviteRuleAjax();
	},
	methods: {
		fetchInviteRuleAjax() {
			this.listLoading = true;
			this.listLoading = false;
			this.listLoading = true;
			fetchInviteRuleAjax(this.listQuery).then(response => {
				if (response.data.data) {
					this.ruleForm = response.data.data;
				}

				this.listLoading = false;
			});
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					updateInviteRuleAjax(this.ruleForm).then(response => {
						if(response.data.code == 0) {
							this.ruleForm.ruleDetail[this.ruleForm.ruleDetail.length - 1].id = response.data.data.spreadDetail[response.data.data.spreadDetail.length - 1].id;
							this.$notify({
								title: "成功",
								message: "提交成功",
								type: "success",
								duration: 2000
							});
						}
					});
				}
			})
		},
		handleCreate() {
			let length = this.ruleForm.ruleDetail.length;
			this.ruleForm.ruleDetail.push({
				createdAt: "",
				disabled: 0,
				id: 0,
				spreadCount: null,
				spreadLevel: length,
				spreadMoney: null,
				spread_rule_id: 1
			})
		}
	}
};
</script>
